{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 布局实例</title>
    <link rel = "stylesheet" href = "{% static 'css/bootstrap.min.css' %}">
    <script src = "{% static 'js/jquery-3.5.1.js' %}"></script>
    <script src = "{% static 'js/bootstrap.js' %}"></script>
</head>
<body>
    <nav class = "navbar navbar-inverse" role = "navigation">
        <div class = "container-fluid">
            <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
                <ul class = "nav navbar-nav">
                    <li class = "active"><a class = "icon-bar" href = "#">mylastday系统</a>
                    </li>
                    <li><a href = "#">菜单1</a>
                    </li>
                    <li><a href = "#">菜单2</a>
                    </li>
                    <li><a href = "#">菜单3</a>
                    </li>
                </ul>
                <ul class = "nav navbar-nav navbar-right">
                    <li><a>欢迎您,admin</a>
                    </li>
                    <li><a href = "#">安全退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class = "container-fluid">
        <div class = "row">
            <div class = "col-sm-2" id = "menulist">
                <a href = "{% url 'page1' %}" class = "list-group-item active" onclick = "loadXMLDoc('/webtest/page1/')">
                    <!-- 小图标样式设置 -->
                    产品信息</a>
                <a href = "{% url 'page2' %}" class = "list-group-item" onclick = "loadPage('/webtest/page2/')">
                    大屏信息 </a>
                <a href = "{% url 'page3' %}" class = "list-group-item" onclick = "loadPage('/webtest/page3/')">
                    用户管理</a>
                <a href = "#" class = "list-group-item">
                    菜单4</a>
                <a href = "#" class = "list-group-item">
                    菜单5</a>
                <a href = "#" class = "list-group-item">
                    菜单6</a>
                <a href = "#" class = "list-group-item">
                    菜单7</a>
            </div>
            <!--左边菜单栏-->
            <div class = "col-sm-10" id = "right">
                <ol class = "breadcrumb">
                    <li class = "active">菜单
                    </li>
                    <li class = "active">用户信息
                    </li>
                </ol>

                <div class = "panel panel-default">
                    <div class = "panel-heading">
                        搜索
                    </div>
                    <div class = "panel-body">
                        <form role = "form" class = "form-inline">
                            <div class = "form-group">
                                <label for = "name">姓名</label>
                                <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名">
                            </div>
                            <div class = "form-group">
                                <label for = "name">状态</label>
                                <select class = "form-control">
                                    <option>正常</option>
                                    <option>禁用</option>
                                </select>
                            </div>
                            <div class = "form-group">
                                <button type = "submit" class = "btn btn-default">开始搜索</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!--
                    列表展示
                -->
                <div id = "right">

                </div>

                <ul class = "pagination" style = "float: right;">
                    <li><a href = "#">&laquo;</a>
                    </li>
                    <li class = "active"><a href = "#">1</a>
                    </li>
                    <li class = "disabled"><a href = "#">2</a>
                    </li>
                    <li><a href = "#">3</a>
                    </li>
                    <li><a href = "#">4</a>
                    </li>
                    <li><a href = "#">5</a>
                    </li>
                    <li><a href = "#">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部页脚部分 -->
    <div class = "footer">
        <p class = "text-center">
            2019 &copy; mylastday.
        </p>
    </div>

    <script>
    /*
           * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
           * （实现左侧菜单中的标签点击后变色的效果）
           */


    function loadXMLDoc(url) {
        var newurl = url;
        $.ajax({
            url: newurl,//加载html的路径
            global: false,
            type: "POST", //请求类型
            dataType: "html",
            async: false,
            success: function (msg) {
                document.getElementById("right").innerHTML = msg;
            }
        })
    }
</script>
</body>

</html>>